<html>
  <head lang="en">
    <meta charset="UTF-8" />
    <title></title>
    <script src="./js/jquery.js"></script>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      body{  

    -webkit-user-select:none; 
    -moz-user-select:none; 
    -ms-user-select:none; 
    user-select:none;
    }

      table {
        border-collapse: collapse;
        border-spacing: 0;
        border: 1px solid #c0c0c0;
        width: 500px;
        margin: 100px auto;
        text-align: center;
      }

      th {
        background-color: #09c;
        font: bold 16px "微软雅黑";
        color: #fff;
        height: 24px;
      }

      td {
        border: 1px solid #d0d0d0;
        color: #404060;
        padding: 10px;
      }

      .allCheck {
        width: 80px;
      }
      .ss {
        display: flex;
        text-align: center;
      }
      .box{
        width: 100%;
      }
      .box .minus{
        width: 20px;
        height: 20px;
        margin-right: 10px;
        font-size: 20px;
        cursor: pointer;
      }
        .box .plus{
        width: 20px;
        height: 20px;
        margin-left: 10px;
        font-size: 20px;
        cursor: pointer;
      }
      span:focus{outline:none;}
    </style>
  </head>

  <body>
    <table>
      <tr>
        <th class="allCheck">
          <input type="checkbox" name="" id="checkAll" />
          <label for="checkAll" class="all">全选</label>
        </th>
        <th>商品</th>
        <th>单价</th>
        <th>数量</th>
        <th>价格</th>
      </tr>

      <tr>
        <td>
          <input type="checkbox" name="check" class="ck" />
        </td>
        <td>小米手机</td>
        <td>
            <span class="danjia">￥768</span>
        </td>
        <td >
          <div class="box">
            <span class="minus">-</span>
            <span class="num">1</span>
            <span class="plus">+</span>
         </div>
        </td>
        <td>
            <span class="jiage">￥899</span>
        </td>
      </tr>

      <tr>
        <td>
          <input type="checkbox" name="check" class="ck" />
        </td>
        <td>小米净水器</td>
        <td>
              <span class="danjia">￥200</span>
        </td>
        <td >
          <div class="box">
            <span class="minus">-</span>
            <span class="num">1</span>
            <span class="plus">+</span>
         </div>
        </td>
        <td>
            <span class="jiage">￥4999</span>
        </td>
      </tr>

      <tr>
        <td>
          <input type="checkbox" name="check" class="ck" />
        </td>
        <td>小米电视</td>
        <td>
              <span class="danjia">￥1768</span>
        </td>
        <td>
           
          <div class="box">
            <span class="minus">-</span>
            <span class="num">1</span>
            <span class="plus">+</span>
         </div>
        </td>
        </td>
        <td class="jiage">￥5999</td>
      </tr>
    </table>
    <script>
      $(function () {
        $("#checkAll").change(function () {
            
          $(".ck").prop("checked", $(this).prop("checked"));
        });
        $(".ck").change(function () {
          console.log($(".ck:checked").length);
          if ($(".ck:checked").length == $(".ck").length) {
            $("#checkAll").prop("checked", true);
          } else {
            $("#checkAll").prop("checked", false);
          }
        });
         
        $(".plus").click(function () {
            let index=$(this).index();
            console.log(index);
          let num = $(this).prev().html();
          num++;

          $(this).prev().html(num);
           let danjia= $(".danjia").html()

           let danjia1=  Number(danjia.slice(1))
        let jiage= $(".jiage").html()

         let jiage1=  Number(jiage.slice(1))
         
        let jiage2= danjia1 * num

         $(".jiage").eq($(this).index()).html(`￥${jiage2}`)
           
        });
        $(".minus").click(function () {
          let num = $(this).next().html();
          if (num == 1) {
            return;
          }
          num--;
          $(this).next().html(num);
        });



      });
    </script>
  </body>
</html>
